<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="/js/vue.js"></script>
    <script src="/js/jquey.3.31.js"></script>
</head>

<body>
<div id="root">
    <div>
        <select id="org" name="org">
            <option value="1">组织1</option>
            <option value="2">组织2</option>
            <option value="3">组织3</option>
        </select>
        <input id="user" disabled>
        <input type="button" value="连接" id="open">
        <input type="button" value="关闭" id="close"><p>
        <textarea name="content" id="content"></textarea>
        <input type="button" value="发送" id="send">
    </div>
    <div id="info"></div>
</div>

<script>

    var ws = null;
    $(function () {
        $("#user").val(Math.random().toString(36).substr(2));
        ws = new WebSocket("ws://192.168.0.162:81/websocket?userCode=" + $("#user").val() + "&departMent=" + $("#org").val());

        $("#open").click(function () {
            ws = new WebSocket("ws://192.168.0.162:81/websocket?userCode=" + $("#user").val() + "&departMent=" + $("#org").val());
        });

        $("#close").click(function () {
            ws.onclose;
        });

        $("#send").click(function () {
            var data = {
                "receiverType" : 3,
                "content" : $("#content").val()
            }
           ws.send(JSON.stringify(data));
        });

        ws.onopen = function () {
            $("#info").append("已连接" + "<hr>");
        }

        ws.onclose = function () {
            console.log("onclose");
            alert("连接关闭");
        }

        ws.onmessage = function (msg) {
             $("#info").append(msg.data + "<hr>");
        }
    });


</script>
</body>

</html>